<template>
  <div class="min-w-[1000px]">
    <!-- 头部信息 -->
    <div class="flex justify-between items-center">
      <div class="flex space-x-4 my-4">
        <span>选择展示内容</span>
        <div class="flex space-x-2 items-center">
          <i class="el-icon-warning-outline text-primary" />
          <div class="text-main-content">
            <span>已添加</span>
            <span
              ><i class="text-primary">{{ selectCount }}</i
              >/{{ total }}条数据</span
            >
          </div>
        </div>
      </div>

      <el-button
        class="rounded-content-wrap"
        type="primary"
        size="small"
        @click="showSelect = true"
        >{{ buttonLabel }}</el-button
      >
    </div>

    <!-- 标签 -->
    <div>
      <ul class="flex space-x-8">
        <li
          v-for="(item, index) in tabList"
          :key="item.name"
          class="cursor-pointer flex flex-col items-center"
          :class="{ active: index === currentIndex }"
          @click="currentIndex = index"
        >
          <div class="h-6">{{ item.label }}</div>
          <div class="line"></div>
        </li>
      </ul>
      <component
        :is="currentName"
        :select-count.sync="selectCount"
        :total.sync="total"
        :id-list.sync="idList"
      />
    </div>

    <!-- 弹窗 -->
    <CustomDialog
      :title="buttonLabel"
      :append-to-body="true"
      :destroy-on-close="true"
      width="900px"
      :visible.sync="showSelect"
    >
      <component
        :is="`Select${currentName}`"
        v-if="showSelect"
        ref="select"
        :id-list.sync="idList"
      />

      <span slot="footer" class="dialog-footer">
        <el-button class="rounded-content-wrap" @click="showSelect = false">取 消</el-button>
        <el-button type="primary" class="rounded-content-wrap" @click="handleOk">确 定</el-button>
      </span>
    </CustomDialog>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Land from './Land.vue'
import CustomDialog from '@/components/admin/manage/carrier/common/CustomDialog/index.vue'
const nameMap = {
  Land: '选择推荐土地',
  Building: '选择推荐楼宇',
  Workshop: '选择推荐厂房',
  Depository: '选择推荐仓库',
  Shop: '选择推荐商铺',
}

interface ITab {
  label: string
  name: string
}

const defaultTabList: ITab[] = [
  {
    label: '土地',
    name: 'Land',
  },
  {
    label: '写字楼',
    name: 'Building',
  },
  {
    label: '厂房',
    name: 'Workshop',
  },
  {
    label: '仓库',
    name: 'Depository',
  },
  {
    label: '商铺',
    name: 'Shop',
  },
]
export default Vue.extend({
  components: {
    CustomDialog,
    Land,
    Building: () => import('./Building.vue'),
    Workshop: () => import('./Workshop.vue'),
    Depository: () => import('./Depository.vue'),
    Shop: () => import('./Shop.vue'),
    SelectLand: () => import('./SelectLand.vue'),
    SelectBuilding: () => import('./SelectBuilding.vue'),
    SelectWorkshop: () => import('./SelectWorkshop.vue'),
    SelectDepository: () => import('./SelectDepository.vue'),
    SelectShop: () => import('./SelectShop.vue'),
  },
  props: {
    parkId: {
      type: [String, Number],
      default: '',
    },
  },
  data() {
    return {
      currentIndex: 0,
      idList: [],
      tabList: defaultTabList,
      map: {
        Land: [],
        Building: [],
        Workshop: [],
        Depository: [],
        Shop: [],
      },
      selectCount: 0,
      total: 0,
      showSelect: false,
    }
  },
  head: {
    title: '优选资源',
  },
  computed: {
    currentName(): string {
      // @ts-ignore
      return this.tabList[this.currentIndex].name
    },
    buttonLabel(): string {
      // @ts-ignore
      return nameMap[this.currentName as string]
    },
  },
  watch: {
    idList(val: string[]) {
      console.log(val)
    },
    selectCount(val: number) {
      // @ts-ignore
      this.map[this.currentName][0] = val
    },
    total(val: number) {
      // @ts-ignore
      this.map[this.currentName][1] = val
    },
    // parkId: {
    //   immediate: true,
    //   handler() {
    //     this.idList = []
    //   },
    // },
  },
  methods: {
    handleOk() {
      // @ts-ignore
      this.$refs.select.handleOk()
      // @ts-ignore
      this.showSelect = false
    },
    handleTabClick(tab: ITab) {
      // @ts-ignore
      const map = this.map[tab.name]
      this.$nextTick(() => {
        // @ts-ignore
        this.selectCount = map[0]
        // @ts-ignore
        this.total = map[1]
      })
    },
  },
})
</script>
<style lang="scss" scoped>
.active {
  font-weight: bold;

  .line {
    background-color: #333333;
  }
}

.line {
  height: 2px;
  width: 80%;
  background-color: transparent;
}

::v-deep .el-tabs__nav-wrap::after {
  @apply w-0;
}
::v-deep .el-tabs__content {
  @apply pt-4;
}
</style>
